
import React, { Component } from "react";
import { Descriptions, Table, Button, Divider, Tag, Alert, message, Pagination, Timeline, Badge, Popconfirm, Modal, Form,
 Input, Select, Switch, Breadcrumb  } from 'antd';
import {  PaperClipOutlined, RetweetOutlined, BarsOutlined, ForkOutlined, CaretRightOutlined, CloseOutlined, QuestionCircleOutlined } from '@ant-design/icons';
import Breadcrumbs from "../../components/component/Breadcrumb/breadcrumb";
import style from './infoDetail.module.css';
import Title from "antd/lib/skeleton/Title";

import { infoList } from "../../services/apis";
const xian = ['雁塔区', '莲湖区', '新城区', '未央区', '长安区', '灞桥区', '高陵区', '临潼区', '沣东新城', '沣西新城', '秦汉新城', '泾河新城', '空港新城']
export default class extends Component {
  constructor() {
    super();
    this.state = {
      hasSelected:true,
      data:[],
      selectedRowKeys: [],
      loading: false,
      visible:false,
      total:0,
      titles:'测试',
      columns: [
        {
          title: '序号',
          dataIndex: 'key',
          width:80,
        },
        {
          title: '资金名称',
          dataIndex: 'name',
          render: (_,record) => <a>{record.name}</a>,
        },
        {
          title: '金额(亿元)',
          dataIndex: 'amount',
        },
        {
          title: '资金来源',
          dataIndex: 'source',
        },
        {
          title: '金额占比(%)',
          dataIndex: 'rate',
        },
        {
          title: '基础设施占比(%)',
          dataIndex: 'buildRate',
        },
        {
          title: '审批部门',
          dataIndex: 'approvalDepartment',
        },
        {
          title: '状态',
          dataIndex: 'status',
          width:88,
          render: (_,record) => (
            record.status == 'success' ? 
            <span>
                <Badge status="success" /> 
                <span style={{marginLeft:6}}>成功</span>
            </span>:
            <span>
                <Badge status="error" /> 
                <span style={{marginLeft:6}}>失败</span>
          </span>            
          ),          
        },    
        {
          title: '明细责任人',
          dataIndex: 'responsibility',
        },        
        {
          title: '操作',
          width:'13%',
          render:(_,record)=>{
            return(
              <>
                  {record.status == 'error'  ? <span style={{marginRight:10}}><a onClick={this.showModal}>修改</a></span>: null}
                  <span style={{marginRight:10}}>
                    <Popconfirm
                      title="确定审批当前数据吗？"
                      icon={<QuestionCircleOutlined style={{ color: 'red' }}/>}
                      onConfirm={this.confirm}
                      onCancel={this.cancel}
                      okText="确定"
                      cancelText="取消"
                    >
                      <a href="#">审批</a>
                    </Popconfirm>
                  </span>
                  <span style={{marginRight:10}}>
                    <Popconfirm
                      title="确定调用当前数据吗？"
                      onConfirm={this.confirms}
                      onCancel={this.cancels}
                      okText="确定"
                      cancelText="取消"
                    >
                      <a href="#">调用</a>
                    </Popconfirm>                    
                  </span>
                  <span style={{marginRight:10}}><a onClick={this.showModal}></a></span>
                  {record.status == 'success'  ? <Tag color="red"><a onClick={this.rejected}>驳回</a></Tag>: null}
              </>
            )
          }
        }
      ],
      infos:{},
      reverse:false,
      pageSize:5,
      pageSizeOptions: ['5', '10', '20', '50', '100'],
      current:1

    };
  }

  confirm = () => {
    this.setState({selectedRowKeys:[]},()=>{
      message.success('审批成功!');
      this.getInfoLists();
    })
  };

  confirms = () => {
    this.setState({selectedRowKeys:[]},()=>{
      message.success('调用成功!');
      this.getInfoLists();
    })
  };
  
  cancel = () => {
    this.setState({selectedRowKeys:[]},()=>{
      message.error('审批取消!');
    })
  };

  cancels = () => {
    this.setState({selectedRowKeys:[]},()=>{
      message.error('调用取消！');
    })    
  };

  // rejected = () => {

  //   message.error('调用取消！');
  // };

  rejected = () => {
    this.setState({visible: true})
  };
  

  componentDidMount() {
      setTimeout(() => {
        this.getInfoLists();
      }, 500);
      if(this.props.location.query){
        console.log('this.props',this.props.location.query);
        sessionStorage.setItem("info",JSON.stringify(this.props.location.query.info));
        this.setState({infos:this.props.location.query.info})
      }
      if(sessionStorage.getItem("info")){
          this.setState({infos:JSON.parse(sessionStorage.getItem("info"))})
      }
      window.scrollTo(0, 0);
  }

  getInfoLists = async () => {
     this.setState({loading: true})
    const res = await infoList();
    if (res.code === 0 && res.data ) {
        this.setState({
          loading: false,
          data:res.data.data,
          total:res.data.total
        });
    } else {
      message.error('暂无数据！');
    }
  };  

  handleOk = () => {
      this.setState({
        visible: false,
        selectedRowKeys:[]
      },()=>{
        message.success('驳回成功！');
        this.getInfoLists();
      });
  };

  handleCancel = () => {
    this.setState({
      visible: false,
      selectedRowKeys:[]
    });
  };

  onSelectChange = selectedRowKeys => {
    console.log('selectedRowKeys changed: ', selectedRowKeys);
    this.setState({ selectedRowKeys });
  };

  handleClick = () => {
    this.setState({reverse: !this.state.reverse})
  };

  onShowSizeChange = (current, pageSize) => {
    console.log(current, pageSize);
    this.setState({current:current,pageSize:pageSize})
  };

  switchOnChange = (checked) => {
    console.log(`switch to ${checked}`);
  };

  approvalDetail = () => {
    this.props.history.push(
    {
      pathname:'/approvalDetail'
    })
  };

  render() {
    const { loading, selectedRowKeys, hasSelected, data, visible, columns, titles, total, infos, reverse, pageSize, pageSizeOptions, current } = this.state;
    const rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange,
    };
    return (
      <>
      {
        infos && 
        <>
        <div style={{marginLeft:0}}>
          {/* <Breadcrumbs props={this.props}></Breadcrumbs> */}
          <Breadcrumb style={{margin:24}}>
              <Breadcrumb.Item href="#">
                  信息概览
              </Breadcrumb.Item>
              <Breadcrumb.Item href="#">
                  数据详情
              </Breadcrumb.Item>
            </Breadcrumb>
        </div> 
        <Divider />   
        <div className={style.alert}>
          {
            infos.status == 'resolve' ?
              <Alert
                message="审批成功"
                description={
                  <div>
                    <div style={{marginTop:10}}>审批人 : {infos.approver}</div>
                    <div style={{marginTop:10}}>资金申请审批成功!</div>
                  </div>
                }
                type="success"
                showIcon
              />:
              <Alert
                message="审批失败"
                description={
                <div>
                    <p style={{margin:10}}>审批人 : {infos.approver}</p>
                    <p style={{marginTop:10,marginLeft:10}}>审批意见 : {infos.opinion} <span style={{color:'#40a9ff',marginLeft:15, cursor:'pointer'}}>查看详情</span></p>
                </div>}
                type="error"
                showIcon
              />
          }
        </div>               
        <div style={{padding:20}}>
          <div style={{width:'90%',marginLeft:20}}>
            <Descriptions style={{textAlign:'left'}} title="流动资金基本信息:" layout="horizontal">
              <Descriptions.Item label="资金名称">{infos.name}</Descriptions.Item>
              <Descriptions.Item label="数额">{infos.count} 亿元</Descriptions.Item>
              <Descriptions.Item label="归属单位">{infos.institution}</Descriptions.Item>
              <Descriptions.Item label="资金来源" >{infos.source}</Descriptions.Item>
              <Descriptions.Item label="关联企业" span={2}>{infos.business}</Descriptions.Item>
              <Descriptions.Item label="审批状态"span={3}>{
                infos.status == 'resolve' ? <Tag color="#87d068">审批成功</Tag>: <Tag color="#ff4d4f">审批失败</Tag>
              }</Descriptions.Item>
              <Descriptions.Item label="审批附件" span={3}><a onClick={()=>{window.open()}}><PaperClipOutlined />{infos.annex}</a></Descriptions.Item>    
              {
                infos.reason  &&
                <Descriptions.Item label="失败原因" ><span style={{color:'#ff4d4f'}}>{infos.reason}</span></Descriptions.Item>
              }          
            </Descriptions>            
          </div>
          <Divider />
          <div className={style.approvalContent}>
            <h3 style={{marginBottom:36,fontWeight:600}}><CaretRightOutlined /> 项目审批流程</h3>
            <Timeline pending={infos.status == 'resolve' ? <Tag color="#87d068">审批成功</Tag>: <Tag color="#ff4d4f">审批失败</Tag>} reverse={reverse}>
              <Timeline.Item><span style={{fontWeight:700}}>【{infos.name}】</span> <span style={{color:'#999',margin:'0 6px',fontSize:11}}>创建时间 :</span><span>2022-05-14 10:26:47</span>
                  <p style={{height:40,background:'#efefef',width:'50%',lineHeight:3,marginTop:18}}><span style={{marginLeft:20}}>项目金额: {infos.count}亿元</span></p>
                </Timeline.Item>              
                <Timeline.Item><span style={{fontWeight:700}}>{infos.status == 'reject' ? <span>张启涛</span>:<span>王立强</span>}</span> <span style={{color:'#999',margin:'0 6px',fontSize:11}}>发起人</span> <span>2022-05-18 17:20:17</span>
                  <p style={{height:40,background:'#efefef',width:'50%',lineHeight:3,marginTop:18}}><span style={{color:'rgb(135, 208, 104)',marginLeft:20}}>发起审批</span></p>
                </Timeline.Item>
                <Timeline.Item><span style={{fontWeight:700}}>{infos.status == 'reject' ? <span>刘洪亮</span>:<span>张骞</span>}</span> <span style={{color:'#999',margin:'0 6px',fontSize:11}}>业务审批</span> <span>2022-05-21 10:02:07</span>
                <p style={{height:40,background:'#efefef',width:'50%',lineHeight:3,marginTop:18}}><span style={{color:'rgb(135, 208, 104)',marginLeft:20}}>通过</span></p>
                </Timeline.Item>
                <Timeline.Item><span style={{fontWeight:700}}>{infos.status == 'reject' ? <span>李建国</span>:<span>吴哲强</span>}</span> <span style={{color:'#999',margin:'0 6px',fontSize:11}}>住建局科局审批</span> <span>2022-05-23 20:27:16</span>
                <p style={{height:40,background:'#efefef',width:'50%',lineHeight:3,marginTop:18}}><span style={{color:'rgb(135, 208, 104)',marginLeft:20}}>审批完成</span></p>
                </Timeline.Item>
                <Timeline.Item><span style={{fontWeight:700}}>成栋</span> <span style={{color:'#999',margin:'0 6px',fontSize:11}}>城建局复审</span> <span>2022-05-28 08:52:29</span>
                <p style={{height:40,background:'#efefef',width:'50%',lineHeight:3,marginTop:18}}>
                  {
                    infos.status == 'reject' ?
                    <span>
                    <span style={{color:'rgb(233 61 43)',marginLeft:20}}>复审驳回</span> 
                    <span style={{marginLeft:15,color:'#999',fontSize:11}}>驳回意见：明细详情对接不清楚，有偏差</span>
                  </span>:
                  <span>
                    <span style={{color:'rgb(135, 208, 104)',marginLeft:20}}>复审通过，审批成功！<a onClick={this.approvalDetail}>查看审批详情</a></span> 
                  </span>
                  }


                </p>
                </Timeline.Item>
              </Timeline>
            {/* <Button
              type="primary"
              style={{
                marginTop: 16,
              }}
              onClick={this.handleClick}
            >
              Toggle Reverse
            </Button> */}
        </div>     
        <Divider /> 
          <div style={{marginLeft:20}}>
            <h3 style={{fontWeight:700}}><CaretRightOutlined /> 资金明细</h3>
              <div style={{ marginBottom: 16, marginTop:26 }}>
                <div style={{textAlign:'left'}}>
                  <span style={{marginRight:10}}>
                      <Popconfirm
                        title="确定审批这一批数据吗？"
                        icon={<QuestionCircleOutlined style={{ color: 'red' }}/>}
                        onConfirm={this.confirm}
                        onCancel={this.cancel}
                        okText="确定"
                        cancelText="取消"
                      >
                        <Button type="primary" disabled={ selectedRowKeys.length> 0 ? false : true } loading={loading}><BarsOutlined /> 批量审批</Button>
                      </Popconfirm>
                    </span>
                    <span style={{marginRight:10}}>
                      <Popconfirm
                        title="确定调用这一批数据吗？"
                        onConfirm={this.confirms}
                        onCancel={this.cancels}
                        okText="确定"
                        cancelText="取消"
                      >
                          <Button type="primary"  disabled={ selectedRowKeys.length> 0 ? false : true } loading={loading}><ForkOutlined /> 批量调用</Button>
                      </Popconfirm>                    
                    </span>
                    <Button type="primary" style={{marginRight:15}} onClick={this.rejected} disabled={ selectedRowKeys.length> 0 ? false : true } loading={loading}><CloseOutlined /> 批量驳回</Button>
                </div>
              </div>
              <div>
                <Table size="middle" rowSelection={rowSelection} loading={loading} columns={columns} dataSource={data}     
                  expandable={{
                    expandedRowRender: (record) => (
                      <p
                        style={{
                          margin: '15px 47px',
                        }}
                      >
                        资金描述: {record.description ? record.description : ''}
                      </p>
                    ),
                    rowExpandable: (record) => record.name !== 'Not Expandable',
                  }}
                  pagination={{
                    // pageSize:{pageSize},
                    // current:{current}, 
                    pageSizeOptions:['5','10','20','50'],
                    showSizeChanger: true,
                    onShowSizeChange:this.onShowSizeChange,
                    showTotal: (total) => `总数${total}`
                  }}  />
                {/* <Pagination style={{margin:'16px 0'}} 
                    pageSizeOptions={pageSizeOptions} 
                    current={current} 
                    onChange={this.pageChange}
                     
                    total={total} showTotal={(total) => `总数${total}`} 
                    showSizeChanger  
                    pageSize={pageSize} /> */}
                <Modal title="数据驳回" visible={visible} onOk={this.handleOk} onCancel={this.handleCancel}>
                    <div>
                      <Form
                        name="basic"
                        labelCol={{
                          span: 6,
                        }}
                        wrapperCol={{
                          span: 18,
                        }}
                        initialValues={{
                          gdp: '',
                          gdpNum: '',
                          upRate: '',
                        }}
                        onFinish={this.onFinish}
                        autoComplete="off"
                      >
                        <Form.Item
                          label="是否驳回"
                          name="upRate"
                          rules={[
                            {
                              required: true,
                            },
                          ]}
                        >
                          <Switch checkedChildren="驳回" unCheckedChildren="同意" onChange={this.switchOnChange} defaultChecked={true} />
                        </Form.Item>                    
                        <Form.Item
                          label="驳回理由"
                          name="gdp"
                          rules={[
                            {
                              required: true,
                              message: '请输入驳回理由!',
                            },
                          ]}
                        >
                          <Input                           
                            style={{
                              width: 220,
                            }} />
                        </Form.Item>

                        <Form.Item
                          label="驳回原因"
                          name="gdpNum"
                          rules={[
                            {
                              required: true,
                              message: '请选择驳回原因!',
                            },
                          ]}
                        >
                          <Select
                            style={{
                              width: 220,
                            }}
                            options={[
                              {
                                value: '数据有误',
                                label: '数据有误',
                              },
                              {
                                value: '审批不合格',
                                label: '审批不合格',
                              },
                              {
                                value: '审批人错误',
                                disabled: true,
                                label: '审批人错误',
                              },
                              {
                                value: '流程异常',
                                label: '流程异常',
                              },
                            ]}
                          />
                        </Form.Item>                
                      </Form>                  
                    </div>
                </Modal>                    
              </div>
          </div>             
        </div>
        </>     
      }
      </>
    )
    }
}
